﻿<UserControl x:Class="Twilight.Views.CompactView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:controls="clr-namespace:Twilight.Controls"
    xmlns:v="clr-namespace:Twilight.Views"
    xmlns:vm="clr-namespace:Twilight.ViewModels"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
    mc:Ignorable="d"
    >
    <UserControl.Resources>
        <vm:FloatingViewModel x:Key="tweetData" d:IsDataSource="True" />
    </UserControl.Resources>
    <Canvas Background="Transparent" DataContext="{Binding Mode=OneWay, Source={StaticResource tweetData}}" Width="200" Height="158">
        <vsm:VisualStateManager.VisualStateGroups>
            <vsm:VisualStateGroup x:Name="LoadStates">
                <vsm:VisualState x:Name="Loading" />
                <vsm:VisualState x:Name="Loaded">
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="followers"
                                         Storyboard.TargetProperty="Opacity"
                                         To="1" />
                        <DoubleAnimation Storyboard.TargetName="follow"
                                         Storyboard.TargetProperty="Opacity"
                                         To="1" />
                        <DoubleAnimation Storyboard.TargetName="avatar"
                                         Storyboard.TargetProperty="Opacity"
                                         To="1" />
                    </Storyboard>
                </vsm:VisualState>
            </vsm:VisualStateGroup>
            <vsm:VisualStateGroup x:Name="TweetViewStates">
                <vsm:VisualState x:Name="Hidden">
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="tweetCanvas"
                                         Storyboard.TargetProperty="Opacity"
                                         To="0.0"/>
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="scaleTx"
                                     Storyboard.TargetProperty="ScaleX">
                            <DiscreteDoubleKeyFrame Value="1" KeyTime="0:0:0" />
                            <DiscreteDoubleKeyFrame Value="0" KeyTime="0:0:0.25" />
                        </DoubleAnimationUsingKeyFrames>
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="scaleTx"
                                     Storyboard.TargetProperty="ScaleY">
                            <DiscreteDoubleKeyFrame Value="1" KeyTime="0:0:0" />
                            <DiscreteDoubleKeyFrame Value="0" KeyTime="0:0:0.25" />
                        </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                </vsm:VisualState>
                <vsm:VisualState x:Name="Shown">
                    <Storyboard>
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="tweetCanvas"
                                     Storyboard.TargetProperty="Opacity">
                            <DiscreteDoubleKeyFrame Value="1.0" KeyTime="0:0:0" />
                        </DoubleAnimationUsingKeyFrames>
                        <DoubleAnimation Storyboard.TargetName="scaleTx"
                                     Storyboard.TargetProperty="ScaleX"
                                     To="1.0"/>
                        <DoubleAnimation Storyboard.TargetName="scaleTx"
                                     Storyboard.TargetProperty="ScaleY"
                                     To="1.0"/>
                    </Storyboard>
                </vsm:VisualState>
                <vsm:VisualStateGroup.Transitions>
                    <vsm:VisualTransition GeneratedDuration="0:0:0.25"/>
                </vsm:VisualStateGroup.Transitions>
            </vsm:VisualStateGroup>
        </vsm:VisualStateManager.VisualStateGroups>
        <Grid x:Name="LayoutRoot" Width="200" Height="58" Background="{StaticResource darkBack}">
            <Grid.RowDefinitions>
                <RowDefinition Height="50" />
                <RowDefinition Height="8" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="50" />
                <ColumnDefinition Width="150"/>
            </Grid.ColumnDefinitions>
            <Border Width="48" Height="48" CornerRadius="3" BorderThickness="0" Background="#66FFFFFF">
                <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="48" Text="?" />
            </Border>
            <Image x:Name="avatar" Width="48" Height="48" Stretch="None" Margin="1" Source="{Binding Avatar}" Opacity="0">
                <Image.Clip>
                    <RectangleGeometry RadiusX="3" RadiusY="3" Rect="0,0,48,48" />
                </Image.Clip>
            </Image>
            <Grid Grid.Row="0" Grid.Column="1" Margin="1,0,0,0">
                <Grid.RowDefinitions>
                    <RowDefinition Height="25" />
                    <RowDefinition Height="25" />
                </Grid.RowDefinitions>
                <TextBlock Grid.Row="0" Grid.ColumnSpan="2" VerticalAlignment="Bottom" Foreground="#FFFFFFFF" FontWeight="Normal" Text="{Binding Username}" FontSize="16" FontFamily="Arial" />
                <StackPanel Orientation="Horizontal" Grid.Row="1" VerticalAlignment="Top">
                    <TextBlock x:Name="followers" Foreground="#44FFFFFF" Text="{Binding Followers}" FontSize="13.333" FontFamily="Arial" Opacity="0"/>
                    <Border Opacity="0" x:Name="follow" Width="45" Margin="2,0,0,0" Height="16" BorderThickness="1" CornerRadius="3" BorderBrush="#A7FFFFFF" VerticalAlignment="Top" Background="#FF1C9B19" Cursor="Hand">
                        <HyperlinkButton x:Name="followLink" HorizontalAlignment="Center" VerticalAlignment="Center" FontFamily="Arial" FontSize="13.333" Foreground="#FFFFFFFF" Margin="0,-1,0,0" NavigateUri="{Binding FollowUri}">
                            <TextBlock Text="follow" Padding="0" Margin="0" HorizontalAlignment="Center" VerticalAlignment="Center" />
                        </HyperlinkButton>
                    </Border>
                </StackPanel>
            </Grid>
            <HyperlinkButton Grid.Row="2" Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Center" Content="twilight" NavigateUri="http://www.codeplex.com/twilight" Foreground="#44000000" FontSize="10.666" Margin="0,-4,0,0" />
        </Grid>
        <controls:BubbleTweet Canvas.Top="50" x:Name="tweetCanvas" DataContext="{Binding CurrentTweet}">
            <controls:BubbleTweet.RenderTransform>
                <ScaleTransform x:Name="scaleTx" CenterX="22" CenterY="-7" ScaleX="0" ScaleY="0" />
            </controls:BubbleTweet.RenderTransform>
        </controls:BubbleTweet>
    </Canvas>
</UserControl>

